<template>
  <custom-navbar
    title=" "
    :auto-back="true"
    bg-color="#f7f7f8"
    left-icon-color="#303133"
  />
  <up-gap height="30rpx" />
  <view class="mb-48rpx flex flex-col items-center justify-center">
    <view class="mb-32rpx h-152rpx w-152rpx shrink-0">
      <up-image width="152rpx" height="152rpx" shape="circle"
      :src="resumeDetail.userInfo.avatar"/>
    </view>
    <view class="flex flex-auto flex-col items-center">
      <view class="mb-16rpx flex items-center justify-between">
        <view class="text-32rpx color-#1d2129">
          {{resumeDetail.userInfo.name}}
        </view>
      </view>
      <view class="mb-16rpx flex text-26rpx color-#4f5760 leading-100%">
        <text>籍贯: {{resumeDetail.userInfo.province}}·{{resumeDetail.userInfo.city}}</text>
        <up-line
          length="30rpx"
          color="#4f5760"
          direction="col"
          margin="0 12rpx"
        />
        <text>{{resumeDetail.userInfo.gender}}</text>
        <up-line
          length="30rpx"
          color="#4f5760"
          direction="col"
          margin="0 12rpx"
        />
        <text>{{resumeDetail.userInfo.qualification}}</text>
        <up-line
          length="30rpx"
          color="#4f5760"
          direction="col"
          margin="0 12rpx"
        />
        <text>{{resumeDetail.intention.nature}}</text>
      </view>
      <view class="flex flex-wrap gap-20rpx">
        <view class="rounded-[22rpx] bg-#fff px-24rpx text-center text-22rpx color-#F57100 leading-54rpx"
        v-for="ite in resumeDetail.highlightsList">
          {{ite}}
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="h-full flex text-[26rpx] text-[#4e5969] font-normal leading-[36rpx]">
      <text class="mr-14rpx color-#333">
        期望职位:
      </text>
      <text>{{resumeDetail.intention.position_type}}·{{resumeDetail.intention.position}}</text>
    </view>
  </view>

  <view class="block-box py-0">
    <view class="flex items-center b-b-1rpx b-b-#ebebeb b-b-solid py-22rpx"
    v-for="item in resumeDetail.educationList">
      <view class="mr-20rpx shrink-0">
        <up-image width="44rpx" height="44rpx" shape="circle" :src="resumeDetail.userInfo.avatar" />
      </view>
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.school_name}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>{{item.qualification}}</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>{{item.majors_name}}</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>{{item.status_overseas_study}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        科研经历
      </view>
    </view>
    <view class="mb-32rpx flex items-center text-28rpx color-#333333">
      <text>{{resumeDetail.scientific_qualification}}</text>
      <up-line
        length="30rpx"
        color="#333333"
        direction="col"
        margin="0 12rpx"
      />
      <text>{{resumeDetail.scientific_school_name}}</text>
    </view>
    <view class="leading-34rpx">
      <view v-for="(item, index) in researchExperienceList" :key="index" class="mb-30rpx flex items-center">
        <view class="mr-56rpx shrink-0 color-#999999">
          {{ item.label }}
        </view>
        <view class="color-#333333">
          {{ item.value }}
        </view>
      </view>
    </view>
    <view class="flex flex-wrap gap-20rpx b-b-1rpx b-b-#ebebeb b-b-solid pb-20rpx">
      <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
        导师:{{resumeDetail.scientific_mentor_name}}
      </view>
      <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
        {{resumeDetail.scientific_author_order}}
      </view>
    </view>
    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
    v-if="resumeDetail.scentificShowCount > 0">
      <text>更多{{resumeDetail.scentificShowCount}}个科研经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        实习经历
      </view>
    </view>
    <view class="mb-22rpx flex items-center justify-between b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx"
    v-for="item in resumeDetail.jobShowList">
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.department}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>{{item.position}}</text>
        </view>
      </view>
    </view>
    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
    v-if="resumeDetail.jobShowCount > 0">
      <text>更多{{resumeDetail.jobShowCount}}个实习经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        在校经历
      </view>
    </view>
    <view class="mb-22rpx flex items-center justify-between b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx"
    v-for="item, index in resumeDetail.schoolShowList">
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.department}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>{{item.position}}</text>
        </view>
      </view>
    </view>
    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
    v-if="resumeDetail.schoolShowCount > 0">
      <text>更多{{resumeDetail.schoolShowCount}}个在校经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        技能及证书
      </view>
    </view>
    <view class="mb-26rpx b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx"
    v-for="itemList, key in resumeDetail.skill">
      <view class="mb-24rpx text-28rpx color-#4e5969">
        {{key}}:
      </view>
      <view class="flex flex-wrap gap-20rpx">
        <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx"
        v-for="item in itemList">
          {{item}}
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        个人荣誉
      </view>
    </view>
    <view
      v-for="(item, index) in personalHonors" :key="index" class="py-22rpx" :class="{
        'b-b-1rpx b-b-#ebebeb b-b-solid': personalHonors.length - 1 !== index,
      }"
    >
      <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
        {{ item.text }}
      </view>
      <view class="flex text-24rpx color-#4e5969 leading-34rpx">
        <text>{{ item.date }}</text>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        一句话打动HR
      </view>
    </view>
    <view class="text-left text-[28rpx] text-[#333333] font-medium leading-[40rpx]">
      {{resumeDetail.heart_content}}
    </view>
  </view>
  <up-gap height="30rpx" />
  <view class="pb-safe" />
</template>

<script setup lang="ts">
// import Img5 from '@/static/images/userInfo/img-5.png';
import { userResumeDetail } from '@/api/user';
const Img5 = "https://yiliao.test03.qcw800.com/static/images/userInfo/img-5.png";
const researchExperienceList:any = ref([]);
const personalHonors:any = ref([]);

const resumeDetail:any = ref({
  userInfo: {
    name: '',
    avatar: '',
    province: '',
    city: '',
    gender: '',
    qualification: '',
    nature: '',
    phone: '',
    email: ''
  },
  intention: {
    id: '',
    nature: '',
    salary_min: '',
    salary_max: '',
    province: '',
    city: '',
    position_type: '',
    position: ''
  },
  skill: [],
  schoolShowCount: 0,
  heart_content: '',
  schoolShowList: [],
  jobShowCount: 0,
  jobShowList: [],
  scientific_qualification: '',
  scientific_school_name: '',
  scientific_mentor_name: '',
  scientific_author_order: '',
  scientificList: [],
  scentificShowCount: 0,
  educationList: [],
  highlightsList: [],
})
async function getResumeDetail(resume_id:number) {
  const r = await userResumeDetail({resume_id: resume_id});
  console.log('预览简历详情 r:::', r);
  let rr:any = {} //结果汇总
  let intention = {}
  if (r.intention) {
    intention = {
      id: r.intention.id,
      nature: r.intention.nature,
      salary_min: r.intention.salary_min,
      salary_max: r.intention.salary_max,
      province: r.intention.province.name,
      city: r.intention.city.name,
      position_type: r.intention.position.p_content,
      position: r.intention.position.content
    }
  }
  rr.intention = intention
  let userInfo = {
    name: r.user.name,
    avatar: r.user.avatar,
    province: r.user.province.name,
    city: r.user.city.name,
    gender: r.user.gender,
    qualification: '未填写',
    nature: r.intention.nature || '',
    phone: r.user.phone,
    email: r.user.email
  }
  rr.userInfo = userInfo
  let educationList = []
  if (r.education && r.education.length>0) {
    educationList = r.education.map(item => {
      return {
        school_name: item.school_name,
        time: item.time,
        qualification: item.qualification,
        majors_name: item.majors_name,
        status_overseas_study: item.status_overseas_study == 1 ? '留学' : '未留学'
      }
    })
    rr.userInfo.qualification = educationList[educationList.length-1].qualification
  }
  rr.educationList = educationList
  let highlightsList = r.highlights;
  rr.highlightsList = highlightsList;
  let scientificList:any = []
  if (r.scientific && r.scientific.length>0) {
    scientificList = r.scientific.map(item => {
      return {
        qualification: item.education ? item.education.qualification : '',
        school_name: item.education ? item.education.school_name : '',
        time: item.time,
        research_direction: item.research_direction,  //研究方向
        research_subject: item.research_subject,      //研究课题
        subject_info: item.subject_info,            //课题描述
        paper_name: item.paper_name,                //论文名称
        mentor_name: item.mentor_name,              //导师
        author_order: item.author_order,            //作者顺序
        paper_status: item.paper_status,            //论文状态
        journals_type: item.journals_type,          //期刊类型
      }
    })
    researchExperienceList.value = [
      {
        label: '课题时间',
        value: scientificList[scientificList.length-1].time,
      },
      {
        label: '研究方向',
        value: scientificList[scientificList.length-1].research_direction,
      },
      {
        label: '研究课题',
        value: scientificList[scientificList.length-1].research_subject,
      },
      {
        label: '课题描述',
        value: scientificList[scientificList.length-1].subject_info,
      },
      {
        label: '论文名称',
        value: scientificList[scientificList.length-1].paper_name,
      },
    ]
  }
  rr.scientific_school_name = scientificList[scientificList.length-1].school_name
  rr.scientific_mentor_name = scientificList[scientificList.length-1].mentor_name
  rr.scientific_author_order = scientificList[scientificList.length-1].author_order
  rr.scientific_qualification = scientificList[scientificList.length-1].qualification
  rr.scientificList = scientificList;
  rr.scentificShowCount = scientificList.length - 1

  let jobList = []  //实习经历
  if (r.job && r.job.length>0) {
    jobList = r.job.map(item => {
      return {
        department: item.department,  //实习单位
        time: item.time,            //实习时间
        position: item.position,    //职位
        content: item.content,      //职责描述
      }
    })
  }
  rr.jobList = jobList;
  let jobShowList = jobList.slice(0, 3);
  rr.jobShowList = jobShowList
  rr.jobShowCount = jobList.length -jobShowList.length

  let schoolList = [] //在校经历
  if (r.school && r.school.length>0) {
    schoolList = r.school.map(item => {
      return {
        department: item.department,  //部门
        time: item.time,            //时间
        position: item.position,    //职位
        content: item.content,      //职责描述
      }
    })
  }
  rr.schoolList = schoolList;
  let schoolShowList = schoolList.slice(0, 3);
  rr.schoolShowList = schoolShowList;
  rr.schoolShowCount = schoolList.length - schoolShowList.length


  let skill:any = {} //技能及证书
  if (r.skill && r.skill.length > 0) {
    // 先初始化所有类别
    for (let i = 0; i < r.skill.length; i++) {
      const r_skill = r.skill[i];
      skill[r_skill.skill_type.name] = [];
    }
    // 再将技能添加到对应类别
    for (let i = 0; i < r.skill.length; i++) {
      const r_skill = r.skill[i];
      skill[r_skill.skill_type.name].push(r_skill.name)
    }
  }
  rr.skill = skill;

  let honorList = [] //荣誉奖项
  if (r.honor && r.honor.length>0) {
    honorList = r.honor.map(item => {
      return {
        text: item.name,
        date: item.time,
      }
    })
  }
  rr.honorList = honorList;
  personalHonors.value = honorList;

  let heart_content = r.heart_content || ''; //一句话打动HR
  rr.heart_content = heart_content;
  resumeDetail.value = rr;

}

onLoad((query:any) => {
  console.log('预览简历-简历ID:::',query.resume_id);
  getResumeDetail(query.resume_id);
});
</script>

<style lang="scss" scoped>
.block-box {
  @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191,191,191,0.26)] rounded-[20rpx] bg-#fff p-24rpx;

  &.py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
